<template>
    <el-container>
        <el-header class='el-header'> 
            <el-steps :active="3" align-center finish-status="success"
            style="width:600px;margin-left:auto;margin-right:auto;margin-top:40px;">
                <el-step title="STEP 1" description="上传实体、关系文件"></el-step>
                <el-step title="STEP 2" description="定义实体属性、关系"></el-step>
                <el-step title="STEP 3" description="完成图谱构建"></el-step>
            </el-steps>
        </el-header>

        <el-main class="main">
        <el-image class="finish-icon" :src="finish_icon_path" style="width:30%;margin-top:20px;"></el-image>
        
        </el-main>
        <el-footer style="height:22%;background-color:#f3f3f4;">
            <el-button round @click="goToNext" style="width=70px;" :loading="loadingbut" :icon="btnIcon">
                {{loadingbutText}}
            </el-button>
        </el-footer>
    </el-container>    
</template>

<script>
import axios from 'axios'
import icon_url from '@/assets/icon-2.png'
import finish_icon_path from '@/assets/complete.png'
export default {
    name:"upload",
    data() {
        return {
            name: "上传文件",
            checkStatus: "",
            activeTab: 'first',
            iconPath:icon_url,
            finish_icon_path:finish_icon_path,
            loadingbut:false,
            loadingbutText:"点击查看",
            btnIcon:" ",
            graph_data: undefined,
            entities:[],
            relations:[],

        }
    },
    created() {
        this.getRouterData()
    },
    methods: {
        getRouterData(){
            this.graph_data = this.$route.params.graph_data;
            console.log(this.graph_data);
            var nodeList = this.graph_data["nodeList"];
            var lineList = this.graph_data["lineList"];
            for(var i=0;i<nodeList.length;i++){
                this.entities.push(nodeList[i]["name"])
            };
            for(var i=0;i<lineList.length;i++){
                this.relations.push(lineList[i]["label"])
            };
        },
        getDate(){
            var now = new Date();
            var year = now.getFullYear();    
            var month = now.getMonth() + 1;  
            var day = now.getDate();  
            var date = year.toString() + "." + month.toString() + "." + day.toString();   
            return date
        },
        goToNext(){
            this.loadingbut = true;
            this.loadingbutText = "生成中...";
            this.btnIcon = "el-icon-loading";
            console.log(this.loadingbut);
            var name = this.$store.state.current_graph_name;
            var date = this.getDate();
            var info = {"name":name, "date": date, "type":"结构化文件","entities":this.entities, "relations":this.relations}
            console.log(info);
            axios.post("http://localhost:8000/polls/save_graph/",JSON.stringify(info),{
                headers: {
                    'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
                }
            }).then(res => {
                console.log(res);
                axios.get("http://localhost:8000/after_creation/").then(res=>{
                    var data = res.data.data;
                    var links = res.data.links;
                    var entities = res.data.entities;
                    var relations = res.data.relations;
                    this.$router.push({ 
                        name:'Kgshow_Disease',
                        params:{
                            data:data,
                            links:links,
                            entities:entities,
                            relations:relations,
                        }
                    })
                    this.loadingbut = false;
                    this.loadingbuttext = "点击查看";
                    this.$message({
                        message: '图谱保存成功!',
                        type: 'success'
                    });
                })
            });
        }
        
    },
}
</script>
<style scoped>
    .el-aside{
        background-color: #2b3a49;
    }
    
    .main{
        background-color: #f3f3f4;
        margin-top:80px;
    }
    .main-container{
        position:absolute;
        height:100%;
        width:100%;
    }
    .card-box{
        margin-top:100px;
    }
    .tab-title{
        color:#fff;
    }

</style>